<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生ajax异步请求演示 </title>
</head>
<body>
   <h2>用户注册</h2>
   用户名:<input id="username" type="text" name="username" onblur="sendAjax()" /><br/>
   <span id="info" style="color: red"></span><br/>
   测试:<input type="text"/>
</body>
<!--发起异步请求
  需求 模拟百度注册 用户名提示
      当录入完用户名，当失去焦点之后
      悄悄给服务器发起一个请求  请求就是校验用户名是否存在的。
      如果存在 就把响应回来的提示信息展示到 span标签中
       实现
         1:给页面标签添加一个 失去焦点事件
         2:事件触发函数
          3:函数中完成 发起异步请求
          4: 响应回来的数据要回显到span中
-->
 <script>
     function sendAjax(){
         // 1：创建 ajax引擎对象
         var xhr=new XMLHttpRequest();
         //2:监控 引擎对象的状态 看是否完成响应，如果正常响应就把响应结果 回显到span中
         xhr.onreadystatechange=function(){
             //我们监控状态的目的 是要知道什么时候  响应正常
             if(xhr.readyState == 4 && xhr.status==200 ){
                 //这次是响应成功了  我们需要把 数据回显到 span中
                 document.getElementById("info").innerHTML=xhr.responseText;
                 //把响应结果 设置到了 span中
             }
         }

         //3: 引擎对象 设置发送路径
         //获取要发送的数据
         var username = document.getElementById("username").value;
         // 地址呢
         var url = "/day09/ajax?username="+username;
         //设置发送地址
         xhr.open("get",url);//默认进行了异步请求
         // xhr.open("get",url,false);//进行同步请求
         //4:发
         xhr.send();
     }
 </script>
</html>